<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- opacity 不透明度 -->
			<!-- <h1 :style="{opacity:opacity}">{{username}}</h1> -->
			<!-- style 样式绑定，简写 -->
			<h1 :style="{opacity}">{{username}}</h1>
			<button @click="stop">销毁vue实例</button>
		</div>
		
		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					username: 'zhangsan',
					opacity: 1
				},
				methods: {
					stop() {
						this.$destroy()
					}
				},
				mounted() {
					console.log('mounted',this)
					// 开启定时器,每隔16毫秒改变opacity的值（0到1之间变化）
					// 将其存到vue实例对象属性中
					this.opacityTimer = setInterval(() => {
						this.opacity -= 0.01
						 if(this.opacity <= 0) this.opacity = 1
					},16)
				},
				beforeDestroy() {
					console.log('beforeDesTroy',this)
					// 清除定时器
					clearInterval(this.opacityTimer)
					debugger
				}
			})
		</script>
	</body>
</html>